<template>
<div>
    <div class="repair-man">
        <div class="headText">
            <div class="head-repair" 
                :class="indexm!=2?'head-repair-margin':''"
                v-for="(itemm,indexm) in tabList" :key='indexm' @click="repairState(indexm)">
                    <p :class="itemm.headStateCol?'Headli1':''">{{itemm.label}}</p>
                    <div :class="itemm.headStateCol?'Headli2':''">{{itemm.inspectProduct.length || 0}}</div>
            </div>
        </div>        
        <div class="content-repair">
             <el-input placeholder="请输入搜索内容" prefix-icon="el-icon-search" v-model="input"></el-input>
            <div v-for="(item,index) in tabList[repairmNum].inspectProduct" :key='index' 
                    class="product-list-repair">
                <ul class="product" @click="detailPage(item.id)">
                    <li>
                        <span>{{item.customerName || '--'}}</span>
                        <span class="repair-state">{{item.statusName}}</span>
                    </li>
                    <li>{{item.productName || '--'}}</li>
                    <li class="text-descritption">{{item.description || '--'}}</li>
                </ul>
                <div>
                    <div v-show="repairmNum==0">
                        <button  class="scanpProduct">扫描二维码</button>
                    </div>
                    <div v-show="repairmNum==1">
                        <button  class="finished" @click="end(item.customerName,
                        item.tasktypeName,item.tasktypeId)">完工</button>
                        <button  class="follow" @click="follow">写跟进</button>
                    </div>
                </div>
                <div class="blackLi"></div>
            </div> 
        </div>  
    </div>
</div>
</template>

<script>
    export default {
    name: 'inspection',
    data() {
        return {
            value6: 0,
            activeName: 'second',
            stretch:true,
            repairmNum:0,
            tabList:[
                {
                    label:'待处理',
                    num:3,
                    headStateCol:true,
                    name:'first',
                    inspectProduct:[]
                },
                {
                    label:'进行中',
                    headStateCol:false,
                    num:66,
                    name:'second',
                    inspectProduct:[]
                },
                {
                    label:'已完成',
                    headStateCol:false,
                    num:33,
                    name:'third',
                    inspectProduct:[]
                }             
            ],         
            //搜索框
            input: '',
            // loading:false
        }
    },
    methods: {
        repairState: function(index) {//tab
        let _this = this;
            this.repairmNum=index;
            console.log('repairState-headStateCol:'+index);
            // this.loading = true;
            let paramfetch={                
                "pageSize":10,
                "page":1,
                "searchMap":{
                    "queryStatus":"",
                }                
            }
            if(index==0){
                paramfetch.searchMap.queryStatus='UNREPAIR';
            }else if(index==1){
                paramfetch.searchMap.queryStatus='REPAIRING';
            }else{
                paramfetch.searchMap.queryStatus='REPAIRED';
            }
            this.$fetch(this.$root.domainIp+'maintain/apporder',{param:this.encrypt(JSON.stringify(paramfetch))})
            .then((response) => {
                // this.loading = false;
                if(response.code == 0){
                    let json_data = JSON.parse(this.decrypt(response.data));
                    if(index==0){
                        this.tabList[0].inspectProduct=json_data.data;
                        this.tabList[0].num = json_data.total;
                        console.log(json_data.data)
                    }else if(index==1){
                        this.tabList[1].inspectProduct=json_data.data;
                        this.tabList[1].num = json_data.total;
                        console.log(json_data.data)
                    }else{
                        this.tabList[2].inspectProduct=json_data.data;
                        this.tabList[2].num = json_data.total;
                        console.log(json_data.data)
                    }
                }else{
                    _this.$message({
                        message:(response.message || '请检查网络是否连接'),
                        center: true
                    });
                }
                
            })
            .catch(function (error) {
                // this.loading = false;
                console.log(error);
                _this.$message({
                    message:('请检查网络是否连接'),
                    center: true
                });
            });
            //排他
            this.tabList.forEach(item => {
                item.headStateCol = false;
            });
            this.tabList[index].headStateCol=true;
        },
        detailPage:function(id){
           console.log(id);
           localStorage.setItem("detailId",id)
           this.$router.push({
            path:'/repairmanDetail'
           })
        },
        follow:function(){
           this.$router.push({
            path:'/repairmanFollow'
           })           
        },
        end:function(name,status,statusId){
            console.log(name,status,statusId)
            localStorage.setItem("customerName",name);
            localStorage.setItem("tasktypeName",status);
            localStorage.setItem("tasktypeId",statusId);
            this.$router.push({
                path:'/repairmanEnd'
            })               
        },
    
    },
    mounted: function(){
        this.repairState(0);
        localStorage.setItem("pageId",1);
    },
    }
</script>

<style scoped>
    .repair-man{
        width: 90%;
        margin-left: 5%;
        padding-top: 5%;
        color: #646464;
        font-size: 0.28rem;
        /* border-bottom: 0.033rem solid #E6E6E6; */
    }
    /* header */
    .head-repair{
        width: 1.2rem;
        height: 1.2rem;
        /* margin: 0.55rem 0 0 0; */
        display:inline-block;
        font-size: 0.28rem;
        
    }
    .head-repair-margin{
        margin-right: 1.57rem;
    }
    .Headli1{
        color: #ff5000;
    }
    .Headli2{
        border-bottom: 0.033rem solid #ff5000;
    }
    .head-repair>p{
        /* padding-bottom: 0.2rem; */
        height:0.8rem;
        line-height:0.8rem;
        /* margin: 0; */
    }
    .head-repair div{
        padding-bottom: 0.14rem;
        /* height:0.8rem; */
        /* line-height:0.8rem; */
    }
    .repair-man .headText{
        border-bottom: 0.033rem solid #E6E6E6;
    }
    /* content */
    .repair-man .content-repair{
        margin-bottom: 2rem;
    }
   .repair-man .el-input{
        margin-top: 0.33rem;
    }
    .repair-man .product-list-repair{
        text-align:left;
        /* border-bottom:0.02rem solid #cccccc; */
    }

    .repair-man .product li{
        margin-top: 0.2rem;
        /* height:0.44rem; */
        padding:0 5%;
    }

    .repair-man .product{
        border-bottom: 0.003rem solid #E6E6E6; 
        /* border-top:0.006rem solid #cccccc; */
        /* padding-top: 0.02rem; */
        padding-bottom: 0.18rem;
        /* padding: 0.15rem 0 0 0; */

    }
    .repair-man .finished,.repair-man .follow,.repair-man .scanpProduct{
        background: #ffffff;
        width: 1.6rem;
        height: 0.55rem;
        border: 0 none;
        color:#646464;
    }
    .repair-man .finished{
        margin-left: 20%;
    }
    .repair-man .follow{
        margin-left: 13%;
    }
    .repair-man .scanpProduct{
        margin-left: 60%;
    }
    .repair-man .repair-state{
        float: right;
        color:#ff5000;
        /* position: absolute;
        right: 5%;
        top: 128%; */
    }
    .repair-man .blackLi{
        height: 0.11rem;
        background-color: #E6E6E6;
    }
    .repair-man  .text-descritption{
        line-height: 0.40rem;
    }

</style>



